import React, {FC, useEffect, useState} from "react";
import BannerSwiper from "./Components/Swiper/Index";
import Box from "./Components/Box/Index";
import {Flex, FloatingBall, Dialog, ShareSheet, NoticeBar, Button, Space, Sticky, Tag} from "react-vant";
import { Image } from "antd-mobile";
import "./index.less";
import { useNavigate } from "react-router-dom";
// import Statistic from "./Components/Statistic";
import { Records, ShareO, ServiceO, ChatO, FireO, Add } from '@react-vant/icons';
import qrcode_wx from "../../assets/images/qrcode_wx.jpg";

type Props = {}

const Home: FC<Props> = () => {

    // const icons = [Records, ShareO, ServiceO, ChatO];
    const [visible, setVisible] = useState(false);
    // const [shareVisible, setShareVisible] = useState(false);
    const navigate = useNavigate();
    // const options = [
    //     { name: '微信', icon: 'wechat' },
    //     { name: '复制链接', icon: 'link' },
    //     // { name: '分享海报', icon: 'poster' },
    //     { name: '二维码', icon: 'qrcode' },
    //   ];

    const onShowFollow = () => {
        setVisible(true);
    }

    return (
        <div className="home">
            {/* <BannerSwiper></BannerSwiper> */}
            <NoticeBar leftIcon={<FireO />} mode='closeable'>
                <div className="justify-between w100p">
                    <span>1折限时中,仅需0.1元! 显示为原价,实际支付自动1折</span>
                    {/* <span>新人专享，次卡邀您享受更优惠</span> */}
                    <Tag style={{'--rv-tag-padding':'0 10px'}} className="mr8" type="warning" size="mini" round plain onClick={()=>{navigate('/my')}}>立即领取</Tag>
                </div>
            </NoticeBar>

            <Box showFollow={onShowFollow}></Box>
            
            <FloatingBall
                offset={{
                    right: 10,
                    bottom: 200,
                }}
                adsorb={{
                    indent: 0.4,  // 滚动缩进比例
                    distance: 10, // 近边停靠距离
                }}
                // menu={{
                //     items: icons.map((Ico, i) => (
                //         <Flex
                //           align="center"
                //           justify="center"
                //           onClick={() => {
                //             switch (i) {
                //                 case 0:
                //                     navigate("/pushNote")
                //                     break;
                //                 case 1:
                //                     setShareVisible(true);
                //                     break;
                //                 case 2:
                //                     navigate("/share")
                //                     break;
                //                 case 3:
                //                     navigate("/feedback")
                //                     break;
                //                 default:
                //                     break;
                //             }

                //           }}
                //           key={i}
                //           className="menu-item"
                //         >
                //           <div className="icon"><Ico fontSize={32} color="#3953e8" /></div>
                //         </Flex>
                //       )),
                // }}
                >
                <Flex align="center" justify="center" >
                    <div>
                        <ShareO fontSize={45} className="mb13" color={'#fff'} onClick={()=>{navigate("/share")}} />
                        <Add fontSize={45} color={'#fff'} onClick={()=>{navigate("/pushNote")}} />
                    </div>
                </Flex>
            </FloatingBall>

            <Dialog
                visible={visible}
                title="长按二维码识别"
                showCancelButton={true}
                showConfirmButton={false}
                cancelButtonText="关闭"
                onCancel={() => setVisible(false)}
            >   
                <Image fit="cover" src={qrcode_wx} alt="" />
            </Dialog>

            {/* <ShareSheet
                visible={shareVisible}
                options={options}
                title="立即分享给好友"
                onCancel={() => setShareVisible(false)}
                onSelect={(option, index) => {
                    console.log('option', option);
                    console.log('index', index);
                    setShareVisible(false);
                }}
            /> */}
            
        </div>
    );
}

export default Home;